前情提要

由於目前有在進行新的專案，為AAPD的設計稿切版，因此會先開始紀錄開發這邊設計稿的問題與重點

表單設計

基本的登入頁都會需要輸入帳號、密碼等資訊，由於表單內容複雜但又蠻重要的，因此這一章節會先詳細介紹關於表單的一切

表單介紹

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

aria

[aria-] 相關屬於網頁親和性，用途是無障礙網頁，可以使用電子設備裡的「旁白」來播放聲音，而aria-label就是播放的內容

[aria-describedby] 用來設定ID，匹配到相同ID即為播放內容


你的密碼需要 8 - 20 的字元長度，包含文字、數字，但不能有空白及特殊字元在內。

輸入框

<div class="mb-3">
   <label for="exampleInputEmail1" class="form-label">Email address</label>
   <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
   <div id="emailHelp" class="">We'll never share your email with anyone else.</div>
</div>

[input]

• 一定要搭配正確的 type 屬性（例如，email 用於電子郵件地址或 number 用於數字）
• form-control會加在input裡面，為基本CSS設定，也可以加上-lg、-sm調整大小
• form-control-plaintext可以有input樣式，但不會有選取外框
• form-text可做為使用者小字提示
• id必須設定、且會與label裡的for相同，達到選取連動效果

[label]

• 一定要搭配正確的 type 屬性（例如，email 用於電子郵件地址或 number 用於數字）
• form-label會加在label裡面，為基本CSS設定
• for必須設定、且會與input裡的id相同，達到選取連動效果

[button]

• 一定要搭配正確的 type 屬性（預設是submit，如要無提交效果可以設定button）
• disabled可以直接寫在button或表單中的任一地方

資料清單

<div class="demo">
  <label for="exampleDataList" class="form-label">Datalist example</label>
  <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>

[datalist]

• 這個需要在input裡面加上 list="" 的屬性，並新增datalist標籤及option
• datalist標籤的 id 須與list相同

核取方塊和選項按鈕

核取方塊type為checkbox，適用多選情境，className設定為form-check系列

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
</div>

單選使用 type="radio"，適用單選情境，其name屬性必須一致才能看做群組

<div class="demo">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>
</div>

切換開關

form-switch+type="checkbox"可以達到手機UI/UX切換開關的效果

<div class="demo">
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
  </div>
</div>

切換按鈕

[btn-check]

• 通過使用 .btn 而非 .form-check-label 樣式在 label 元素上創建類似 button 的核取方塊和選項按鈕
• 必須加上 .btn-check
• id 必須完全對應
• input 與 label 元素必須相鄰

<div class="demo">
  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn-check">Single toggle</label>
  <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
  <label class="btn btn-outline-primary" for="btn-check-2">Checked</label>
  <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
  <label class="btn btn-outline-primary" for="btn-check-3">Disabled</label>
</div>

<h4>選項切換按鈕</h4>

<div class="demo">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-outline-secondary" for="option1">Checked</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-secondary" for="option2">Radio</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
  <label class="btn btn-outline-secondary" for="option3">Disabled</label>

  <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
  <label class="btn btn-outline-secondary" for="option4">Radio</label>
</div>

重點整理

1. input一定要設定type並搭配label
2. 不同type會有對應的className(form-xx-xx)
3. input裡面一定會有class跟id，沒有就是有問題
4. 組合式用法可以多看官方文件